<template>
  <div class="dragarea-top-right-action" :style="getStyle('root')">
    <div>
      <a-dropdown overlayClassName="idm_dev_theme" placement="bottom">
        <span class="ant-dropdown-link">
          {{ actionMenuList
              .filter(item => item.key === "4")[0]
              .subList?.filter(item => item.active)[0].showText
         }}</span>
         <DownOutlined />
         <template #overlay>
            <a-menu @click="actionMenuClickHandle">
              <a-menu-item v-for="iitem in modeTemplate.subList" :key="iitem.key">
                <div class="dropdown-option-item dropdown-option-layout-type" :class="{ active: iitem.active }">
                  <CheckOutlined />
                  <span>{{ iitem.showText }}</span>
                  <span class="shortcutkey">{{ iitem.shortcutKey }}</span>
                </div>
              </a-menu-item>
            </a-menu>
         </template>
      </a-dropdown>
    </div>
    <div class="ant-dropdown-link" :disabled="getMenuObjectForKey('304').disabled" @click="actionMenuClickHandle({ key: '304' })">页面设置</div>
    <!--更多-->
    <div>
      <a-dropdown overlayClassName="idm_dev_theme idm-more" placement="bottom">
        <a @click="(e) => e.preventDefault()"> 更多 </a>
        <template #overlay>
          <a-menu @click="actionMenuClickHandle">
            <div v-for="item in actionMenuList" :key="item.key">
              <a-menu-divider v-if="item.type == -1" :key="item.key" />
              <a-sub-menu
                v-else-if="item.type === 2 && !item.hidden"
                :disabled="item.disabled"
                :key="item.key"
              >
                <template #title>
                  <div class="menu-option-item" :class="{ active: item.active }">
                    <CheckOutlined />
                    <span>{{ item.showText }}</span>
                  </div>
                  </template>
                  <div class="idm-submore" v-for="sitem in item.subList" :key="sitem.key">
                    <a-menu-divider v-if="sitem.type == -1" :key="sitem.key" />
                    <a-menu-item v-else-if="!sitem.hidden" :key="sitem.key" :disabled="sitem.disabled">
                      <div class="menu-option-item" :class="{ active: sitem.active }">
                        <span>
                          <CheckOutlined />
                          <span>{{ sitem.showText }}</span>
                        </span>
                        <div class="shortcutkey">{{ sitem.shortcutKey }}</div>
                      </div>
                    </a-menu-item>
                  </div>
              </a-sub-menu>
              <a-menu-item v-else-if="!item.hidden" :key="item.key" :disabled="item.disabled">
                <div class="menu-option-item" :class="{ active: item.active }">
                  <span>
                    <CheckOutlined />
                    <span class="shortcutkey">{{ item.showText }}</span>
                  </span>
                  <span>{{ item.shortcutKey }}</span>
                </div>
              </a-menu-item>
            </div>
          </a-menu>
        </template>
      </a-dropdown>
    </div>
    <!--全局搜索-->
    <div @click="actionMenuClickHandle({ key: '106' })" :disabled="getMenuObjectForKey('106').disabled">
      <a-tooltip title="全局搜索 Ctrl+Shift+F">
        <SearchOutlined class="oneicon" />
      </a-tooltip>
    </div>
    <!--历史记录-->
    <div @click="actionMenuClickHandle({ key: '303' })" :disabled="getMenuObjectForKey('303').disabled">
      <a-tooltip title="历史记录 Ctrl+Shift+Alt+H">
        <HistoryOutlined class="oneicon" />
      </a-tooltip>
    </div>
    <!--预览-->
    <div @click="actionMenuClickHandle({ key: '102' })" :disabled="getMenuObjectForKey('102').disabled">
      <a-tooltip title="预览 Ctrl+P">
        <EyeOutlined class="oneicon" style="font-size: 18px" />
      </a-tooltip>
    </div>
    <!--保存-->
    <div @click="actionMenuClickHandle({ key: '100' })" :disabled="getMenuObjectForKey('100').disabled" style="padding: 0">
      <a-tooltip title="保存 Ctrl+S" placement="rightBottom">
        <div class="savebtn">保 存</div>
      </a-tooltip>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed, defineProps, reactive, getCurrentInstance } from 'vue'
import HJP from '@/utils/install';
import { DownOutlined, CheckOutlined, SearchOutlined, EyeOutlined, HistoryOutlined } from '@ant-design/icons-vue'
const getCurrentIns = getCurrentInstance()
const proxy:any = getCurrentIns?.proxy
const props:any = defineProps({
  height: String,
  changeHandle: {
    type: Function,
    require: true,
  }
})
/**
 * type: -1 线条
 * type: 1 操作工具
 * type: 2 有子菜单的菜单
 * type: 3 打开新地址的菜单
 * type: 9 关于工具
 * value: 对应的value key
 * disabled: 是否禁用
 * keyGroup: 按钮组合（通过这个来触发菜单功能）
 * shortcutKey: 按钮建的建组合显示给用户看的
 * mayCheck: 是否允许选中
 */
const actionMenuList = reactive([
  {
    key: "1",
    showText: "常用操作",
    type: 2,
    subList: [
      {
        key: "100",
        showText: "保存",
        value: "",
        type: 1,
        active: false,
        keyGroup: {
          ctrlKey: true,
          shiftKey: false,
          altKey: false,
          keyCode: "83"
        },
        shortcutKey: "Ctrl+S"
      },
      {
        key: "101",
        showText: "另存为",
        value: "",
        type: 1,
        hidden: HJP.url.queryObject().mode === 'easy',
        active: false,
        disabled: false,
        keyGroup: {
          ctrlKey: true,
          shiftKey: true,
          altKey: false,
          keyCode: "83",
        },
        shortcutKey: "Ctrl+Shift+S",
      },
      {
        key: "102",
        showText: "预览",
        value: "",
        type: 1,
        active: false,
        keyGroup: {
          ctrlKey: true,
          shiftKey: false,
          altKey: false,
          keyCode: "80",
        },
        shortcutKey: "Ctrl+P"
      },
      {
        key: "103",
        showText: "调试",
        value: "",
        type: 1,
        active: false,
        disabled: true,
        keyGroup: {
          ctrlKey: true,
          shiftKey: false,
          altKey: false,
          keyCode: "68"
        },
        shortcutKey: "Ctrl+D"
      },
      {
        key: "104",
        showText: "撤销",
        value: "",
        type: 1,
        active: false,
        disabled: true,
        keyGroup: {
          ctrlKey: true,
          shiftKey: false,
          altKey: false,
          keyCode: "90",
        },
        shortcutKey: "Ctrl+Z",
      },
      {
        key: "105",
        showText: "重做",
        value: "",
        type: 1,
        active: false,
        disabled: true,
        keyGroup: {
          ctrlKey: true,
          shiftKey: true,
          altKey: false,
          keyCode: "90",
        },
        shortcutKey: "Ctrl+Shift+Z",
      },
      {
        key: "106",
        showText: "搜索",
        value: "",
        type: 1,
        active: false,
        disabled: false,
        keyGroup: {
          ctrlKey: true,
          shiftKey: true,
          altKey: false,
          keyCode: "70",
        },
        shortcutKey: "Ctrl+Shift+F",
      },
      {
        key: "107",
        type: -1,
      },
      {
        key: "110",
        showText: "剪切组件",
        value: "",
        type: 1,
        active: false,
        disabled: true,
        contextMenu: true,
        keyGroup: {
          ctrlKey: true,
          shiftKey: false,
          altKey: false,
          keyCode: "88",
        },
        shortcutKey: "Ctrl+X",
      },
      {
        key: "108",
        showText: "拷贝组件",
        value: "",
        type: 1,
        active: false,
        disabled: true,
        contextMenu: true,
        keyGroup: {
          ctrlKey: true,
          shiftKey: false,
          altKey: false,
          keyCode: "67",
        },
        shortcutKey: "Ctrl+C",
      },
      {
        key: "109",
        showText: "粘贴组件",
        value: "",
        type: 1,
        active: false,
        disabled: false,
        contextMenu: true,
        keyGroup: {
          ctrlKey: true,
          shiftKey: false,
          altKey: false,
          keyCode: "86",
        },
        shortcutKey: "Ctrl+V",
      },
      {
        key: "126",
        showText: "复制组件",
        value: "",
        type: 1,
        active: false,
        disabled: true,
        contextMenu: true,
        keyGroup: {
          ctrlKey: true,
          shiftKey: true,
          altKey: false,
          keyCode: "67",
        },
        shortcutKey: "Ctrl+Shift+C",
      },
      {
        key: "111",
        showText: "删除组件",
        value: "",
        type: 1,
        active: false,
        disabled: true,
        contextMenu: true,
        keyGroup: {
          ctrlKey: false,
          shiftKey: false,
          altKey: true,
          keyCode: "46",
        },
        shortcutKey: "Alt+Del",
      },
      {
        key: "112",
        type: -1,
      },
      {
        key: "121",
        showText: "上移一层",
        value: "",
        type: 1,
        active: false,
        disabled: true,
        contextMenu: true,
        keyGroup: {
          ctrlKey: true,
          shiftKey: false,
          altKey: false,
          keyCode: "221",
        },
        shortcutKey: "Ctrl+]",
      },
      {
        key: "122",
        showText: "下移一层",
        value: "",
        type: 1,
        active: false,
        disabled: true,
        contextMenu: true,
        keyGroup: {
          ctrlKey: true,
          shiftKey: false,
          altKey: false,
          keyCode: "219",
        },
        shortcutKey: "Ctrl+[",
      },
      {
        key: "123",
        showText: "置于顶层",
        value: "",
        type: 1,
        active: false,
        disabled: true,
        contextMenu: true,
        keyGroup: {
          ctrlKey: true,
          shiftKey: false,
          altKey: false,
          keyCode: "84",
        },
        shortcutKey: "Ctrl+T",
      },
      {
        key: "124",
        showText: "置于底层",
        value: "",
        type: 1,
        active: false,
        disabled: true,
        contextMenu: true,
        keyGroup: {
          ctrlKey: true,
          shiftKey: false,
          altKey: false,
          keyCode: "66",
        },
        shortcutKey: "Ctrl+B",
      },
      {
        key: "131",
        type: -1,
      },
      {
        key: "113",
        showText: "选择父组件",
        value: "",
        type: 1,
        active: false,
        disabled: true,
        keyGroup: {
          ctrlKey: false,
          shiftKey: false,
          altKey: false,
          keyCode: "38",
        },
        shortcutKey: "↑",
      },
      {
        key: "114",
        showText: "选择子组件",
        value: "",
        type: 1,
        active: false,
        disabled: true,
        keyGroup: {
          ctrlKey: false,
          shiftKey: false,
          altKey: false,
          keyCode: "40",
        },
        shortcutKey: "↓",
      },
      {
        key: "115",
        showText: "向右选择兄弟组件",
        value: "",
        type: 1,
        active: false,
        disabled: true,
        keyGroup: {
          ctrlKey: false,
          shiftKey: false,
          altKey: false,
          keyCode: "39",
        },
        shortcutKey: "→",
      },
      {
        key: "116",
        showText: "向左选择兄弟组件",
        value: "",
        type: 1,
        active: false,
        disabled: true,
        keyGroup: {
          ctrlKey: false,
          shiftKey: false,
          altKey: false,
          keyCode: "37",
        },
        shortcutKey: "←",
      },
      {
        key: "117",
        showText: "拖拽组件并复制",
        value: "",
        type: 1,
        active: false,
        disabled: true,
        shortcutKey: "Alt+Drag",
      },
      {
        key: "132",
        type: -1,
      },
      {
        key: "118",
        showText: "组合",
        value: "",
        type: 1,
        active: false,
        disabled: true,
        contextMenu: true,
        keyGroup: {
          ctrlKey: true,
          shiftKey: false,
          altKey: false,
          keyCode: "71",
        },
        shortcutKey: "Ctrl+G",
      },
      {
        key: "119",
        showText: "取消组合",
        value: "",
        type: 1,
        active: false,
        disabled: true,
        contextMenu: true,
        hidden: true,
        keyGroup: {
          ctrlKey: true,
          shiftKey: true,
          altKey: false,
          keyCode: "71",
        },
        shortcutKey: "Ctrl+Shift+G",
      },
      {
        key: "128",
        showText: "锁定",
        value: "",
        type: 1,
        active: false,
        disabled: true,
        contextMenu: true,
        keyGroup: {
          ctrlKey: true,
          shiftKey: false,
          altKey: false,
          keyCode: "76",
        },
        shortcutKey: "Ctrl+L",
      },
      {
        key: "131",
        showText: "解锁",
        value: "",
        type: 1,
        active: false,
        disabled: true,
        contextMenu: true,
        hidden: true,
        keyGroup: {
          ctrlKey: true,
          shiftKey: true,
          altKey: false,
          keyCode: "76",
        },
        shortcutKey: "Ctrl+Shift+L",
      },
      {
        key: "129",
        showText: "隐藏",
        value: "",
        type: 1,
        active: false,
        disabled: true,
        contextMenu: true,
        keyGroup: {
          ctrlKey: true,
          shiftKey: false,
          altKey: false,
          keyCode: "72",
        },
        shortcutKey: "Ctrl+H",
      },
    ]
  },
  {
    key: "2",
    showText: "工具辅助",
    type: 2,
    subList: [
      {
        key: "200",
        showText: "显示网格",
        value: "",
        type: 1,
        active: false,
        mayCheck: true,
        keyGroup: {
          ctrlKey: true,
          shiftKey: false,
          altKey: true,
          keyCode: "222",
        },
        shortcutKey: "Ctrl+Alt+'",
      },
      {
        key: "201",
        showText: "显示标尺",
        value: "",
        type: 1,
        active: true,
        mayCheck: true,
        keyGroup: {
          ctrlKey: true,
          shiftKey: false,
          altKey: true,
          keyCode: "188",
        },
        shortcutKey: "Ctrl+Alt+,",
      },
      {
        key: "202",
        showText: "显示参考线",
        value: "",
        type: 1,
        active: true,
        mayCheck: true,
        keyGroup: {
          ctrlKey: true,
          shiftKey: false,
          altKey: true,
          keyCode: "190",
        },
        shortcutKey: "Ctrl+Alt+.",
      },
      {
        key: "203",
        showText: "创建参考线",
        value: "",
        type: 1,
        active: false,
        keyGroup: {
          ctrlKey: true,
          shiftKey: false,
          altKey: true,
          keyCode: "78",
        },
        shortcutKey: "Ctrl+Alt+N",
      },
      {
        key: "204",
        showText: "锁定参考线",
        value: "",
        type: 1,
        active: false,
        mayCheck: true,
        keyGroup: {
          ctrlKey: true,
          shiftKey: true,
          altKey: true,
          keyCode: "76",
        },
        shortcutKey: "Ctrl+Shift+Alt+L",
      },
      {
        key: "205",
        showText: "删除所有参考线",
        value: "",
        type: 1,
        active: false,
        shortcutKey: "",
      },
    ]
  },
  {
    key: "3",
    showText: "功能区",
    type: 2,
    subList: [
      {
        key: "300",
        showText: "开关左侧功能区",
        value: "",
        type: 1,
        active: false,
        keyGroup: {
          ctrlKey: true,
          shiftKey: true,
          altKey: true,
          keyCode: "219",
        },
        shortcutKey: "Ctrl+Shift+Alt+[",
      },
      {
        key: "301",
        showText: "开关右侧属性区",
        value: "",
        type: 1,
        active: false,
        keyGroup: {
          ctrlKey: true,
          shiftKey: true,
          altKey: true,
          keyCode: "221",
        },
        shortcutKey: "Ctrl+Shift+Alt+]",
      },
      {
        key: "302",
        type: -1,
      },
      {
        key: "303",
        showText: "历史记录",
        value: "",
        type: 1,
        active: false,
        mayCheck: true,
        keyGroup: {
          ctrlKey: true,
          shiftKey: true,
          altKey: true,
          keyCode: "72",
        },
        shortcutKey: "Ctrl+Shift+Alt+H",
      },
      {
        key: "304",
        showText: "页面设置",
        value: "",
        type: 1,
        active: false,
        keyGroup: {
          ctrlKey: true,
          shiftKey: true,
          altKey: true,
          keyCode: "83",
        },
        shortcutKey: "Ctrl+Shift+Alt+S",
      },
      {
        key: "305",
        showText: "动作面板",
        value: "",
        type: 1,
        active: false,
        mayCheck: true,
        keyGroup: {
          ctrlKey: true,
          shiftKey: true,
          altKey: true,
          keyCode: "77",
        },
        shortcutKey: "Ctrl+Shift+Alt+M",
      },
      {
        key: "306",
        showText: "页面源码",
        value: "",
        type: 1,
        active: false,
        mayCheck: true,
        keyGroup: {
          ctrlKey: true,
          shiftKey: true,
          altKey: true,
          keyCode: "67",
        },
        shortcutKey: "Ctrl+Shift+Alt+C",
      },
      {
        key: "307",
        showText: "数据源",
        value: "",
        type: 1,
        active: false,
        mayCheck: true,
        keyGroup: {
          ctrlKey: true,
          shiftKey: true,
          altKey: true,
          keyCode: "82",
        },
        shortcutKey: "Ctrl+Shift+Alt+R",
      },
    ]
  },
  {
    key: "4",
    showText: "屏幕模式",
    type: 2,
    subList: [
      {
        key: "400",
        showText: "标准模式",
        value: false,
        type: 1,
        active: true,
        mayCheck: true,
        keyGroup: {
          ctrlKey: false,
          shiftKey: true,
          altKey: false,
          keyCode: "49",
        },
        shortcutKey: "Shift+1",
      },
      {
        key: "401",
        showText: "全屏模式",
        value: true,
        type: 1,
        active: false,
        mayCheck: true,
        keyGroup: {
          ctrlKey: false,
          shiftKey: true,
          altKey: false,
          keyCode: "50",
        },
        shortcutKey: "Shift+2",
      },
      {
        key: "402",
        showText: "布局模式",
        value: false,
        type: 1,
        active: false,
        mayCheck: true,
        keyGroup: {
          ctrlKey: false,
          shiftKey: true,
          altKey: false,
          keyCode: "51",
        },
        shortcutKey: "Shift+3",
      },
      {
        key: "403",
        showText: "禅定模式",
        value: false,
        type: 1,
        active: false,
        mayCheck: true,
        keyGroup: {
          ctrlKey: false,
          shiftKey: true,
          altKey: false,
          keyCode: "52",
        },
        shortcutKey: "Shift+4",
      },
    ]
  },
  {
    key: "5",
    showText: "当前主题",
    type: 2,
    subList: [
      {
        key: "500",
        showText: "默认主题",
        value: "default",
        type: 1,
        active: true,
        mayCheck: true,
        keyGroup: {
          ctrlKey: true,
          shiftKey: false,
          altKey: false,
          keyCode: "49",
        },
        shortcutKey: "Ctrl+1",
      },
      {
        key: "501",
        showText: "酷黑主题",
        value: "night",
        type: 1,
        active: false,
        mayCheck: true,
        keyGroup: {
          ctrlKey: true,
          shiftKey: false,
          altKey: false,
          keyCode: "50",
        },
        shortcutKey: "Ctrl+2",
      },
    ]
  },
  {
    key: "-1",
    type: -1,
  },
  {
    key: "8",
    showText: "帮助文档",
    type: 3,
    active: false,
    disabled: false,
    openUrl: HJP.setting.develop.helpDocumentUrl,
    keyGroup: {
      ctrlKey: true,
      shiftKey: false,
      altKey: false,
      keyCode: "112",
    },
    shortcutKey: "Ctrl+F1",
  },
  {
    key: "12",
    showText: "文档管理",
    type: 3,
    active: false,
    disabled: true,
    openUrl: HJP.setting.develop.documentManageUrl,
    shortcutKey: "",
  },
  {
    key: "9",
    type: -1,
  },
  {
    key: "11",
    showText: "偏好设置",
    type: 9,
    active: false,
    shortcutKey: "",
  },
  {
    key: "10",
    showText: "关于",
    type: 9,
    active: false,
    keyGroup: {
      ctrlKey: true,
      shiftKey: true,
      altKey: false,
      keyCode: "65",
    },
    shortcutKey: "Ctrl+Shift+A",
  },
])

const modeTemplate:any = computed(() => {
  return actionMenuList.filter(item => item.key === '4')[0]
})

const getStyle = (key: string) => {
  const styles:any = {}
  switch (key) {
    case 'root':
      styles.height = props.height + 'px';
      styles['line-height'] = props.height + 'px'
      break
    default:
      break
  }
  return styles
}

function getMenuObjectForKey(key: string): any {
  let menuObject = {};
  actionMenuList.forEach(item => {
    if (item.key === key) {
      menuObject = item
    }
    if (item.subList) {
      item.subList.forEach(sitem => {
        if (sitem.key === key) {
          menuObject = sitem
        }
      })
    }
  })
  return menuObject
}
/**
 * 把当前状态抽取出来保存到缓存中
 */
function saveActionStateToCache() {
  window.localStorage.DevelopActionState = JSON.stringify(actionMenuList);
}

// 下拉框事件
function actionMenuClickHandle({ key, domEvent }: any) {
  const clickObject: any = getMenuObjectForKey(key)
  clickObject.event = domEvent;
  if (clickObject && clickObject.mayCheck) {
    if (key.indexOf("4") === 0 || key.indexOf("5") === 0) {
      if (clickObject.active) {
        proxy.$message.warning("当前已是【" + clickObject.showText + "】")
        return
      }
    }
    clickObject.active = !clickObject.active
  }
  if (clickObject && clickObject.openUrl) {
    window.open(clickObject.openUrl)
  }
  props.changeHandle(clickObject)
  saveActionStateToCache()
}
// 查看是否有修改并找到
function actionChangeToFatherEvent(defaultObject:any, newObject:any) {
  if (defaultObject.type === 1) {
    if (defaultObject.active !== newObject.active) {
      props.changeHandle(defaultObject)
    }
  } else {
    defaultObject.active = newObject.active
  }
}
// 加载当前缓存到页面上
function loadActionCacheToPage() {
  let actionCache = window.localStorage.DevelopActionState
  if (actionCache && actionCache.indexOf("[{") === 0) {
    actionCache = JSON.parse(actionCache)
    actionCache.forEach((item: { key: string; subList: []}) => {
      const defaultObject = getMenuObjectForKey(item.key);
      actionChangeToFatherEvent(defaultObject, item)
      if (item.subList) {
        item.subList.forEach((item: { key: string }) => {
          const sdefaultObject = getMenuObjectForKey(item.key);
          actionChangeToFatherEvent(sdefaultObject, item);
        })
      }
    })
  }
}
loadActionCacheToPage()
</script>

<style lang="scss">
.idm-more{
  .ant-dropdown-menu-submenu-title{
    width: 200px;
  }
  .ant-dropdown-menu-submenu-expand-icon{
    top: 50%;
    transform: translateY(-50%);
  }
  .menu-option-item{
    width: 100%;
    display: flex;
    justify-content: space-between;
    // color: #666;
  }
  .anticon-check{
    display: none;
    position: absolute;
    left: 0;
    top: 3px;
  }
  &.active{
    .anticon{
      display: inline-block;
    }
  }
}
.idm-submore{
  .anticon-check{
    display: none;
    position: absolute;
    left: 0;
    top: 3px;
  }
  &.active{
    .anticon{
      display: inline-block;
    }
  }
  .menu-option-item{
    display: flex;
    justify-content: space-between;
    // color: #666;
  }
  .ant-dropdown-menu-title-content{
    width: 210px;
  }
}
</style>

<style lang="scss" scoped>
.dragarea-top-right-action{
  display: flex;
  justify-content: flex-end;
  .backout {
    transform: rotateY(180deg);
  }
  & > div{
    padding: 0 8px;
    white-space: nowrap;
    cursor: pointer;
    > a{
      display: block;
    }
    &[disabled] {
      // opacity: 0.3;
      cursor: not-allowed;
      a{
        cursor: not-allowed;
      }
    }
    svg{
      outline: none;
    }
  }
  .oneicon{
    font-size: 16px;
  }
  .savebtn{
    padding: 0;
    margin-left: 8px;
    width: 80px;
    text-align: center;
    font-size: 16px;
    transition: all linear 0.3s;
    background-color: #1890ff;
    color: #ffffff;
    &:hover {
      opacity: 0.8;
    }
  }
}
// 下拉框单项样式
.dropdown-option-item{
  padding-left: 20px;
  display: inline-block;
  position: relative;
  .anticon{
    display: none;
    position: absolute;
    left: 0;
    top: 3px;
  }
  &.active{
    .anticon{
      display: inline-block;
    }
  }
  .shortcutkey{
    width: 70px;
    display: inline-block;
    text-align: right;
    opacity: 0.6;
  }
}
</style>
